<script setup lang="ts">
  import { useGetUpdateWarrantyDateRangeLogList } from '@/services/pages/code/useCode'
  import moment from 'moment'
  import UpdateWarrantyDateRangeCheckModal from './checkModal.vue'
  import { computed, ref } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import { updateWarrantyDateRangeDel } from '@/api/code'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import { useUserStore } from '@/store/modules/user'

  const { list, getListLoading, getList } = useGetUpdateWarrantyDateRangeLogList()

  defineOptions({
    name: 'UpdateWarrantyDateRangeApplyLogList',
  })

  const props = defineProps({
    codeId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 用户状态管理
  const userStore = useUserStore()

  // 当前正在审核的更改质保周期记录id
  const currentUpdateWarrantyDateRangeCheckRowId = ref('')

  // 审核更改质保周期弹窗显示状态
  const updateWarrantyDateRangeCheckModalVisible = ref(false)

  // 日志列表
  const logList = computed(() => {
    return list.value
  })

  /**
   * 审核点击事件
   * @param {string} id - 记录id
   */
  const handleCheckClick = (id: string) => {
    currentUpdateWarrantyDateRangeCheckRowId.value = id
    updateWarrantyDateRangeCheckModalVisible.value = true
  }

  /**
   * 审核弹窗更新事件
   */
  const onCheckModalUpdate = () => {
    getList(props.codeId)
    emits('update')
  }

  /**
   * 删除点击事件
   */
  const handleDelClick = (id: string) => {
    ElMessageBox({
      type: 'error',
      title: '提示',
      message: '确定删除该记录吗？',
      autofocus: false,
      showCancelButton: true,
      beforeClose: async (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          const res = await updateWarrantyDateRangeDel(id)
          if (res.data.code === 20000) {
            HMessage.success('删除成功')
            getList(props.codeId)
            done()
            return
          }
          HMessageBox.error(res.data.message)
          return
        }
        done()
      },
    })
  }

  defineExpose({
    getList: async () => {
      await getList(props.codeId)
    },
    isHaveWaitCheck: () => {
      return list.value.some((item) => item.applyState === 0)
    },
  })
</script>

<template>
  <div v-loading="getListLoading">
    <el-table :border="true" :data="list">
      <!--序号-->
      <el-table-column type="index" width="50" fixed="left" :align="'center'" label="序号" />

      <!--质保开始时间（新）-->
      <el-table-column prop="newStartTime" label="质保开始时间(新)" width="128">
        <template #default="{ row }">
          {{ moment(row.newStartTime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>

      <!--质保结束时间（新）-->
      <el-table-column prop="newEndTime" label="质保结束时间(新)" width="128">
        <template #default="{ row }">
          {{ moment(row.newEndTime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>

      <!--质保开始时间（旧）-->
      <el-table-column prop="oldStartTime" label="质保开始时间(旧)" width="128">
        <template #default="{ row }">
          {{ moment(row.oldStartTime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>

      <!--质保结束时间（旧）-->
      <el-table-column prop="oldEndTime" label="质保结束时间(旧)" width="128">
        <template #default="{ row }">
          {{ moment(row.oldEndTime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>

      <!--审核备注-->
      <el-table-column prop="applyMsg" label="审核备注" width="100" show-overflow-tooltip />

      <!--审核人员-->
      <el-table-column prop="applyName" label="审核人员" width="80" show-overflow-tooltip />

      <!--创建人员-->
      <el-table-column prop="createEmp" label="创建人员" width="80" show-overflow-tooltip />

      <!--创建时间-->
      <el-table-column prop="gmtCreate" label="创建时间" width="128" />

      <!--状态-->
      <el-table-column label="状态" width="100" fixed="right">
        <template #default="{ row }">
          <h-status v-if="row.applyState === 0" type="warning">待审核</h-status>
          <h-status v-if="row.applyState === 1">审核通过</h-status>
          <h-status v-if="row.applyState === 2" type="error">驳回</h-status>
        </template>
      </el-table-column>

      <el-table-column v-if="!userStore.isCurrentRoleNetwork" label="操作" fixed="right" width="50">
        <template #default="{ row }">
          <h-link :disabled="row.applyState !== 0" @click="handleCheckClick(row.id)">审核</h-link>
          <!-- <h-space> -->
          <!-- <h-link :disabled="row.applyState !== 0" type="error" @click="handleDelClick(row.id)"
              >删除</h-link
            > -->
          <!-- </h-space> -->
        </template>
      </el-table-column>
    </el-table>

    <update-warranty-date-range-check-modal
      v-model="updateWarrantyDateRangeCheckModalVisible"
      :update-warranty-date-range-log-row-id="currentUpdateWarrantyDateRangeCheckRowId"
      @update="onCheckModalUpdate"
    />
  </div>
</template>

<style scoped lang="scss"></style>
